<html ng-app='expanderModule'>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="../angular-1.0.3/angular.min.js"></script>
		<link rel="stylesheet" type="text/css" href="ExpanderSimple.css" />
	</head>
	<style type="text/css">
		.expander {
			border: 1px solid black;
			width: 250px;
		}
		
		.expander>.title {
			background-color: black;
			color: white;
			padding: .1em .3em;
			cursor: pointer;
		}
		
		.expander>.body {
			padding: .1em .3em;
		}
	</style>

	<body>
		<div ng-controller='SomeController'>
			<expander class='expander' expander-title='title'>
				{{text}}
			</expander>
		</div>
	</body>
	<script src="ExpanderSimple.js"></script>
	<script type="text/javascript" src="../js/angular.js"></script>
	<script>
		/*AngularJS 的 directive 默认能共享父 scope 中定义的属性，
		 * 例如在模版中直接使用父 scope 中的对象和属性
		 * 。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。
		 * 当你需要创建一个可重复使用的 directive，
		 * 只是偶尔需要访问或者修改父 scope 的数据，就需要使用隔离 scope
		 * 。当使用隔离 scope 的时候，directive 会创建一个没有依赖父 scope 的 scope，
		 * 并提供一些访问父 scope 的方式。*/
		var expanderModule = angular.module('expanderModule', [])
		expanderModule.directive('expander', function() {
			return {
				restrict: 'EA', //EA: 表示该directive既能以element方式使用，也能以attribute方式使用
				replace: true,
				transclude: true,
				scope: {
					title: '=expanderTitle'
				},
				template: '<div>' +
					'<div class="title" ng-click="toggle()">{{title}}</div>' +
					'<div class="body" ng-show="showMe" ng-transclude></div>' +
					'</div>',
					/*link可以简单理解为，当directive被angular 编译后，执行该方法*
					 *link中的第一个参数scope基本上就是你说的上面写的那个scope。 
					 *element简单说就是$('expander')
					 */
				link: function(scope, element, attrs) {
					scope.showMe = false;
					scope.toggle = function toggle() {
						scope.showMe = !scope.showMe;
					}
				}
			}
		});
		expanderModule.controller('SomeController', function($scope) {
			$scope.title = '点击展开';
			$scope.text = '这里是内部的内容。';
		});
	</script>

</html>